<template>
	<view>
		<u-navbar back-text="返回" title="车辆管理"></u-navbar>
		<view class="cars-container">
			
			<view class="car-item" v-for="index in 2">
				<!-- top -->
				<view class="top">
					<image class="image" src="../../static/images/Taycan.jpeg"></image>
					    <view class="text-container">
					        <text class="text">兰博基尼</text>
					        <view class="tag-container">
					            <u-tag text="豪车" mode="light"/>
								<u-tag text="已审核" type="success" mode="light"/>
					        </view>
					    </view>
				</view>
				<!-- content -->
				<view class="content">
					<u-cell-group>
						<u-cell-item icon="share" title="停车坐爱枫林晚" :arrow="true" arrow-direction="down"></u-cell-item>
						<u-cell-item icon="map" title="霜叶红于二月花" :arrow="false"></u-cell-item>
						<u-cell-item title="车牌号" :arrow="false" value="闽A 88888"></u-cell-item>
						<u-cell-item title="品牌型号" :arrow="false" value="保时捷Taycan"></u-cell-item>
						<u-cell-item title="颜色" :arrow="false" value="白色"></u-cell-item>
					</u-cell-group>
				</view>
				<!-- button -->
				<view class="button-container">
					<u-button class="button" @click="detailCarInfo">查看详情</u-button>
					<u-button class="button" type="error">删除</u-button>
				</view>
				
			</view>
			
			<view class="addNew">
				<u-icon name="plus"></u-icon>
				<text>添加车辆</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			detailCarInfo(carInfoId){
				uni.navigateTo({
				  url: '/pages/driver/carInfo_detail'
				});
			}
		}
	}
</script>

<style>
	.cars-container {
	    background-color: #ddd8d9; /* 选择一个你喜欢的背景颜色 */
	    padding: 10px; /* 可选：添加内边距 */
		border: 2px solid; /* 边框宽度 */
		border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); /* 五彩渐变边框 */
		border-image-slice: 1; /* 确保边框渐变填满整个边框区域 */
		border-bottom-left-radius: 10px; /* 底部左侧圆角，使用视口宽度的百分比 */
		border-bottom-right-radius: 10px; /* 底部右侧圆角，使用视口宽度的百分比 */
	}
	
	.car-item{
		background-color: #ffffff;
		padding: 5px 0;
		margin-bottom: 10px;
		border-radius: 10px; 
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
	}
.top {
    display: flex; 
    align-items: center;
    gap: 10px; 
	padding: 5px;
}

.image {
    width: 80px; 
    height: 50px; 
}

.text-container {
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}

.text {
    font-size: 16px; 
    color: #000; 
}

.tag-container {
    margin-top: 5px;
}
.button-container {
    display: flex; 
    gap: 10px; 
    margin: 20px; 
}

.button {
    flex: 1;
    min-width: 100px; 
}
.addNew {
    display: flex;
    flex-direction: column; /* 上下排列 */
    align-items: center; /* 水平居中对齐 */
    justify-content: center; /* 垂直居中对齐 */
    text-align: center; /* 文字居中对齐 */
    width: 100px; /* 固定宽度 */
    height: 100px; /* 固定高度，保持宽高一致 */
    border-radius: 50%; /* 使元素变成圆形 */
    background-color: #007bff; /* 按钮背景颜色，可根据需要调整 */
    color: white; /* 文字颜色 */
    font-size: 14px; /* 文字大小 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标悬停时显示手形光标 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: background-color 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
	margin-left: 35%;
}

.addNew:hover {
    background-color: #0056b3; /* 悬停时的背景颜色 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
}

.addNew u-icon {
    font-size: 24px; /* 图标大小 */
    margin-bottom: 8px; /* 图标和文字之间的间距 */
}

.addNew text {
    font-size: 14px; /* 文字大小 */
}
</style>
